<div class="widget-modal">
  <div class="widget-modal-heading">
    Service Accounts
  </div>
  <div class = "table-content">
    <span class="col-xs-6"><button type="button" class="btn btn-primary btn-wide pull-right" (click)="createAccount()">New</button></span>
    <input type="text" class="form-control" id="serviceAccountSearch" placeholder="Filter Service Accounts"
           [(ngModel)]="serviceAccountSearch">
    <div class="dash-modal-row delete-dashboard-row clearfix" style="font-size: 20px;" *ngFor="let serviceAccount of this.serviceAccounts | generalFilter:{serviceAccountName:serviceAccountSearch} | generalOrderBy:'serviceAccountName' | paginate: { itemsPerPage: 10, currentPage: p }">
      <div>
        <div ng-hide="!ctrl.serviceAccounts">
          <a  (click)="deleteServiceAccount(serviceAccount)">
            <app-dash-trash class="clickable pull-right"></app-dash-trash>
          </a>
          <app-dash-edit class="clickable pull-right" (click)="updateAccount(serviceAccount)"></app-dash-edit>
        </div>
        <h6>Service Account: {{serviceAccount?.serviceAccountName}}</h6>
        <h6>File Types: {{serviceAccount?.fileNames}}</h6>
      </div>
    </div>
    <div class="card-footer pb-0 pt-3">
      <pagination-controls totalItems=this.serviceAccounts.length previousLabel=""
                           nextLabel="" maxSize="4" (pageChange)="p = $event"></pagination-controls>
    </div>
  </div>
</div>
